/**
 * @author:linjiye
 * @date: 2024/12/25
 * @desc:
 **/

import {Image, Pressable, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import React, {useState} from 'react'
import {Link, useRouter} from "expo-router";
import Animated from "react-native-reanimated";

type Props = {}

const MenuList = ({navigation}) => {
    const router = useRouter();
    const [menuList, setMenuList] = useState([
        {
            pathName: 'keywordExplosion',
            title: '关键词找爆款',
            icon: require('@/assets/images/index/icon1.png'),
            iconW: 28,
            iconH: 28
        }, {
            pathName: 'benchmarkingAccount',
            title: '对标账号找爆款',
            icon: require('@/assets/images/index/icon2.png'),
            iconW: 28,
            iconH: 28
        }, {
            pathName: 'morePlatforms',
            title: '更多平台找爆款',
            icon: require('@/assets/images/index/icon3.png'),
            iconW: 28,
            iconH: 28
        }, {
            pathName: 'aiInnovation',
            title: 'AI 二创',
            icon: require('@/assets/images/index/icon4.png'),
            iconW: 28,
            iconH: 28
        }, {
            pathName: 'aiOriginality',
            title: 'AI 原创',
            icon: require('@/assets/images/index/icon5.png'),
            iconW: 28,
            iconH: 28
        }, {
            pathName: 'explosiveFission',
            title: '爆文裂变',
            icon: require('@/assets/images/index/icon6.png'),
            iconW: 28,
            iconH: 28
        }, {
            pathName: 'useExplosive',
            title: '爆文套用',
            icon: require('@/assets/images/index/icon7.png'),
            iconW: 28,
            iconH: 28
        }
    ])
    return (
        <View style={styles.container}>
            {menuList?.map((item, index) => (
                <Pressable key={index} style={styles.item} onPress={() => router.navigate(`/${item.pathName}`)}>
                    <Image style={{width: item.iconW, height: item.iconH}} resizeMode={"contain"}
                           source={item.icon}></Image>
                    <Text style={styles.name}>{item.title}</Text>
                </Pressable>
            ))}
            {/*<Link style={styles.item} navigate href='/keywordExplosion'>*/}
            {/*    <Image style={{width: 46,height: 36}} resizeMode={"contain"} source={require('@/assets/images/index/wd_icon.png')}></Image>*/}
            {/*    <Text style={styles.name}>关键词找爆款</Text>*/}
            {/*</Link>*/}
        </View>
    )
}

export default MenuList

const styles = StyleSheet.create({
    container: {
        display: "flex",
        flexWrap: "wrap",
        flexDirection: "row",
        marginTop: 8,
        backgroundColor: 'rgba(255,255,255,0.5)',
        borderRadius: 8,
        paddingVertical: 4
    },
    item: {
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        width: "33.33%",
        paddingVertical: 12
    },
    name: {
        fontSize: 12,
        color: 'rgba(0,0,0,0.9)',
        lineHeight: 18,
        marginTop: 8
    }
})